<%-- Created by IntelliJ IDEA. User: 大帅 Date: 2025/7/25 Time: 17:08 To change this template use File | Settings | File
    Templates. --%>
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
        <% String path=request.getContextPath(); String basePath=request.getScheme() + "://" + request.getServerName()
            + ":" + request.getServerPort() + path + "/" ; %>
            <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
                <!DOCTYPE html>
                <html>

                <head>
                    <base href="<%= basePath %>" />
                    <title>茶叶商品管理</title>
                    <link href="/app/pages/css/bootstrap.min.css" rel="stylesheet">
                    <link href="/app/pages/css/bootstrap-icons.css" rel="stylesheet">
                    <style>
                        body {
                            background-color: #f8f9fa;
                            font-family: "Microsoft YaHei", sans-serif;
                        }

                        .page-header {
                            background: linear-gradient(135deg, #4a8447, #6fb76c);
                            color: white;
                            padding: 30px;
                            border-radius: 15px;
                            margin-bottom: 30px;
                            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
                        }

                        .brand-text {
                            color: #e8f5e9;
                            font-weight: 600;
                            position: relative;
                            display: inline-block;
                            padding: 0 5px;
                            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
                        }

                        .brand-text::after {
                            content: '';
                            position: absolute;
                            bottom: 2px;
                            left: 0;
                            width: 100%;
                            height: 4px;
                            background: rgba(255, 255, 255, 0.3);
                            border-radius: 2px;
                        }

                        .title-text {
                            font-size: 2em;
                            font-weight: bold;
                            letter-spacing: 1px;
                        }

                        .add-product-btn {
                            background: rgba(255, 255, 255, 0.2);
                            border: 2px solid rgba(255, 255, 255, 0.4);
                            color: white;
                            padding: 8px 20px;
                            border-radius: 25px;
                            transition: all 0.3s ease;
                        }

                        .add-product-btn:hover {
                            background: rgba(255, 255, 255, 0.3);
                            border-color: rgba(255, 255, 255, 0.6);
                            color: white;
                            transform: translateY(-2px);
                        }

                        .add-product-btn i {
                            margin-right: 5px;
                        }

                        .search-bar {
                            background: white;
                            padding: 25px;
                            border-radius: 15px;
                            margin-bottom: 30px;
                            box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
                            border: 1px solid rgba(74, 132, 71, 0.1);
                        }

                        .search-group {
                            display: flex;
                            flex-direction: column;
                            gap: 8px;
                        }

                        .search-label {
                            color: #4a8447;
                            font-weight: 600;
                            font-size: 0.9em;
                            margin: 0;
                            padding-left: 5px;
                        }

                        .search-input-group {
                            position: relative;
                            display: flex;
                            align-items: center;
                        }

                        .search-input {
                            width: 100%;
                            border: 2px solid #e8f5e9;
                            border-radius: 25px;
                            padding: 10px 20px;
                            padding-left: 45px;
                            font-size: 1em;
                            transition: all 0.3s ease;
                            background: #f8faf8;
                            height: 45px;
                        }

                        .search-input:focus {
                            border-color: #4a8447;
                            box-shadow: 0 0 0 0.2rem rgba(74, 132, 71, 0.15);
                            background: white;
                        }

                        .search-icon {
                            position: absolute;
                            left: 15px;
                            color: #4a8447;
                            font-size: 1.1em;
                        }

                        .filter-select {
                            width: 100%;
                            border: 2px solid #e8f5e9;
                            border-radius: 25px;
                            padding: 10px 20px;
                            font-size: 1em;
                            transition: all 0.3s ease;
                            background: #f8faf8;
                            cursor: pointer;
                            color: #2c5828;
                            height: 45px;
                            -webkit-appearance: none;
                            -moz-appearance: none;
                            appearance: none;
                            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%234a8447' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
                            background-repeat: no-repeat;
                            background-position: right 15px center;
                            padding-right: 40px;
                        }

                        .filter-select:focus {
                            border-color: #4a8447;
                            box-shadow: 0 0 0 0.2rem rgba(74, 132, 71, 0.15);
                            background-color: white;
                        }

                        .search-btn {
                            width: 100%;
                            height: 45px;
                            background: linear-gradient(135deg, #4a8447, #6fb76c);
                            border: none;
                            border-radius: 25px;
                            color: white;
                            font-weight: 600;
                            transition: all 0.3s ease;
                            text-transform: uppercase;
                            letter-spacing: 1px;
                            font-size: 0.9em;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            gap: 8px;
                        }

                        .search-btn:hover {
                            transform: translateY(-2px);
                            box-shadow: 0 4px 15px rgba(74, 132, 71, 0.3);
                            color: white;
                        }

                        .search-btn i {
                            font-size: 1.1em;
                        }

                        .form-label {
                            color: #4a8447;
                            font-weight: 600;
                            margin-bottom: 8px;
                            font-size: 0.9em;
                            text-transform: uppercase;
                            letter-spacing: 0.5px;
                        }

                        .product-card {
                            background: white;
                            border-radius: 10px;
                            overflow: hidden;
                            transition: all 0.3s ease;
                            margin-bottom: 20px;
                            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
                        }

                        .product-card:hover {
                            transform: translateY(-5px);
                            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
                        }

                        .product-img {
                            width: 100%;
                            height: 200px;
                            object-fit: cover;
                        }

                        .product-info {
                            padding: 20px;
                        }

                        .product-title {
                            font-size: 1.2em;
                            font-weight: 600;
                            margin-bottom: 10px;
                            color: #333;
                        }

                        .product-price {
                            color: #e44d26;
                            font-size: 1.3em;
                            font-weight: 600;
                            margin-bottom: 15px;
                        }

                        .product-meta {
                            color: #666;
                            font-size: 0.9em;
                            margin-bottom: 5px;
                        }

                        .badge-custom {
                            padding: 5px 10px;
                            border-radius: 15px;
                            font-size: 0.8em;
                            margin-right: 5px;
                        }

                        .badge-level {
                            background-color: #4a8447;
                            color: white;
                        }

                        .badge-category {
                            background-color: #f0f7f0;
                            color: #4a8447;
                            border: 1px solid #4a8447;
                        }

                        .action-buttons {
                            margin-top: 15px;
                            display: flex;
                            gap: 10px;
                        }

                        .btn-custom {
                            flex: 1;
                            border-radius: 20px;
                            font-size: 0.9em;
                        }

                        /* 编辑模态框样式 */
                        .modal-content {
                            border: none;
                            border-radius: 15px;
                            box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
                        }

                        .modal-header {
                            background: linear-gradient(135deg, #4a8447, #6fb76c);
                            color: white;
                            border-radius: 15px 15px 0 0;
                            padding: 20px 30px;
                            border: none;
                        }

                        .modal-title {
                            font-size: 1.5em;
                            font-weight: 600;
                        }

                        .btn-close {
                            background-color: rgba(255, 255, 255, 0.8);
                            padding: 12px;
                            border-radius: 50%;
                        }

                        .modal-body {
                            padding: 30px;
                        }

                        .modal-footer {
                            padding: 20px 30px;
                            border-top: 1px solid #eee;
                        }

                        .form-label {
                            color: #4a8447;
                            font-weight: 600;
                            margin-bottom: 8px;
                        }

                        .form-control,
                        .form-select {
                            border: 2px solid #e8f5e9;
                            border-radius: 10px;
                            padding: 10px 15px;
                            transition: all 0.3s ease;
                        }

                        .form-control:focus,
                        .form-select:focus {
                            border-color: #4a8447;
                            box-shadow: 0 0 0 0.2rem rgba(74, 132, 71, 0.15);
                        }

                        .input-group-text {
                            background-color: #f8faf8;
                            border: 2px solid #e8f5e9;
                            border-right: none;
                            color: #4a8447;
                            font-weight: 600;
                        }

                        .input-group .form-control {
                            border-left: none;
                        }

                        .modal-footer .btn {
                            padding: 10px 30px;
                            border-radius: 25px;
                            font-weight: 600;
                            text-transform: uppercase;
                            letter-spacing: 1px;
                            transition: all 0.3s ease;
                        }

                        .modal-footer .btn-secondary {
                            background-color: #e8f5e9;
                            border: none;
                            color: #4a8447;
                        }

                        .modal-footer .btn-secondary:hover {
                            background-color: #d7ebd8;
                            transform: translateY(-2px);
                        }

                        .modal-footer .btn-primary {
                            background: linear-gradient(135deg, #4a8447, #6fb76c);
                            border: none;
                        }

                        .modal-footer .btn-primary:hover {
                            transform: translateY(-2px);
                            box-shadow: 0 4px 15px rgba(74, 132, 71, 0.3);
                        }

                        /* 输入验证样式 */
                        .form-control:invalid,
                        .form-select:invalid {
                            border-color: #4a8447;
                            background-image: none;
                        }

                        .form-control:valid,
                        .form-select:valid {
                            border-color: #4a8447;
                            background-image: none;
                        }
                    </style>
                </head>

                <body>
                    <div class="container py-4">
                        <!-- 页面标题 -->
                        <div class="page-header">
                            <div class="d-flex justify-content-between align-items-center">
                                <h1 class="mb-0 title-text">
                                    <span class="brand-text">${gsname}</span>
                                    茶叶商品管理
                                </h1>
                                <button class="btn add-product-btn" onclick="addProduct()">
                                    <i class="bi bi-plus-lg"></i>
                                    添加商品
                                </button>
                            </div>
                        </div>
                        <!-- 搜索和筛选区 -->
                        <div class="search-bar">
                            <div class="row g-3 align-items-end">
                                <div class="col-md-4">
                                    <div class="search-group">
                                        <label class="search-label">商品名称</label>
                                        <div class="search-input-group">
                                            <i class="bi bi-search search-icon"></i>
                                            <input type="text" class="search-input" placeholder="输入商品名称搜索..."
                                                id="searchInput">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="search-group">
                                        <label class="search-label">茶叶分类</label>
                                        <select class="filter-select" id="categoryFilter">
                                            <option value="">全部分类</option>
                                            <option value="1">绿茶</option>
                                            <option value="2">红茶</option>
                                            <option value="3">乌龙茶</option>
                                            <option value="4">普洱茶</option>
                                            <option value="5">白茶</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="search-group">
                                        <label class="search-label">品质等级</label>
                                        <select class="filter-select" id="levelFilter">
                                            <option value="">全部等级</option>
                                            <option value="1">特级</option>
                                            <option value="2">一级</option>
                                            <option value="3">二级</option>
                                            <option value="4">三级</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <button class="btn search-btn" onclick="searchProducts()">
                                        <i class="bi bi-search"></i>
                                        搜索
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- 商品列表 -->
                        <div class="container">
                            <!-- 在售商品 -->
                            <div class="mb-4">
                                <h3 class="text-success mb-3">
                                    <i class="bi bi-shop"></i> 在售商品
                                </h3>
                                <div class="row" id="onSaleProducts"></div>
                            </div>

                            <!-- 未上架商品 -->
                            <div>
                                <h3 class="text-secondary mb-3">
                                    <i class="bi bi-box-seam"></i> 未上架商品
                                </h3>
                                <div class="row" id="offSaleProducts"></div>
                            </div>
                        </div>

                        <!-- 编辑商品模态框 -->
                        <div class="modal fade" id="editProductModal" style="margin-top: 100px" tabindex="-1"
                            aria-labelledby="editProductModalLabel" aria-hidden="true">
                            <div class="modal-dialog modal-lg">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="editProductModalLabel">编辑商品</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                                            aria-label="Close"></button>
                                    </div>
                                    <div class="modal-body">
                                        <form id="editProductForm">
                                            <input type="hidden" id="editProductId" name="id">
                                            <div class="row mb-3">
                                                <div class="col-md-6">
                                                    <label for="editProductName" class="form-label">商品名称</label>
                                                    <input type="text" class="form-control" id="editProductName"
                                                        name="proname" required>
                                                </div>
                                                <div class="col-md-6">
                                                    <label for="editProductPrice" class="form-label">价格</label>
                                                    <div class="input-group">
                                                        <span class="input-group-text">¥</span>
                                                        <input type="number" class="form-control" id="editProductPrice"
                                                            name="price" step="0.01" required>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row mb-3">
                                                <div class="col-md-6">
                                                    <label for="editProductCategory" class="form-label">茶叶分类</label>
                                                    <select class="form-select" id="editProductCategory"
                                                        name="categoryname" required>
                                                        <%-- <option value="绿茶">绿茶</option>--%>
                                                            <%-- <option value="红茶">红茶</option>--%>
                                                                <%-- <option value="乌龙茶">乌龙茶</option>--%>
                                                                    <%-- <option value="普洱茶">普洱茶</option>--%>
                                                                        <%-- <option value="白茶">白茶</option>--%>
                                                    </select>
                                                </div>
                                                <div class="col-md-3">
                                                    <label for="editProductLevel" class="form-label">品质等级</label>
                                                    <select class="form-select" id="editProductLevel" name="levelname"
                                                        required>
                                                        <%-- <option value="特级">特级</option>--%>
                                                            <%-- <option value="一级">一级</option>--%>
                                                                <%-- <option value="二级">二级</option>--%>
                                                                    <%-- <option value="三级">三级</option>--%>
                                                    </select>
                                                </div>
                                                <div class="col-md-3">
                                                    <label for="editProductCategory" class="form-label">上下架</label>
                                                    <select class="form-select" name="status" required>
                                                        <option value="1" selected>上架</option>
                                                        <option value="0">下架</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="row mb-3">
                                                <div class="col-md-6">
                                                    <label for="editProductOrigin" class="form-label">产地</label>
                                                    <input type="text" class="form-control" id="editProductOrigin"
                                                        name="originplace" required>
                                                </div>
                                                <div class="col-md-6">
                                                    <label for="editProductStock" class="form-label">库存数量</label>
                                                    <input type="number" class="form-control" id="editProductStock"
                                                        name="quantity" required disabled>
                                                </div>
                                            </div>
                                            <div class="row mb-3">
                                                <div class="col-md-6">
                                                    <label for="editProductionYear" class="form-label">生产年份</label>
                                                    <input type="number" class="form-control" id="editProductionYear"
                                                        name="productionyear" required disabled>
                                                </div>
                                                <div class="col-md-6">
                                                    <label for="editProductionMonth" class="form-label">生产月份</label>
                                                    <input type="number" class="form-control" id="editProductionMonth"
                                                        name="productionmonth" min="1" max="12" required disabled>
                                                </div>
                                            </div>
                                            <div class="mb-3">
                                                <label for="editProductDescription" class="form-label">商品描述</label>
                                                <textarea class="form-control" id="editProductDescription"
                                                    name="description" rows="3" placeholder="请输入商品描述信息..."></textarea>
                                            </div>
                                        </form>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary" id="cancelEditBtn">取消</button>
                                        <button type="button" class="btn btn-primary"
                                            onclick="saveProductChanges()">保存更改
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 删除确认模态框 -->
                    <div class="modal fade" id="deleteConfirmModal" tabindex="-1"
                        aria-labelledby="deleteConfirmModalLabel" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered">
                            <div class="modal-content">
                                <div class="modal-header bg-danger text-white border-0">
                                    <h5 class="modal-title" id="deleteConfirmModalLabel">
                                        <i class="bi bi-exclamation-triangle-fill me-2"></i>
                                        确认删除
                                    </h5>
                                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                                        aria-label="Close"></button>
                                </div>
                                <div class="modal-body py-4">
                                    <div class="text-center mb-3">
                                        <i class="bi bi-trash text-danger" style="font-size: 3rem;"></i>
                                    </div>
                                    <p class="text-center fs-5 mb-0">您确定要删除这个商品吗？</p>
                                    <p class="text-center text-muted mb-0">此操作不可恢复。</p>
                                </div>
                                <div class="modal-footer border-0 justify-content-center">
                                    <button type="button" class="btn btn-light px-4" data-bs-dismiss="modal">
                                        <i class="bi bi-x-lg me-2"></i>取消
                                    </button>
                                    <button type="button" class="btn btn-danger px-4" id="confirmDeleteBtn">
                                        <i class="bi bi-trash me-2"></i>确认删除
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 添加商品模态框 -->
                    <div class="modal fade" id="addProductModal" style="margin-top: 100px" tabindex="-1"
                        aria-labelledby="addProductModalLabel" aria-hidden="true">
                        <div class="modal-dialog modal-lg">
                            <div class="modal-content">
                                <div class="modal-header"
                                    style="background: linear-gradient(135deg, #4a8447, #6fb76c); color: white;">
                                    <h5 class="modal-title" id="addProductModalLabel">
                                        <i class="bi bi-plus-circle-fill me-2"></i>
                                        添加新商品
                                    </h5>
                                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                                        aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    <form id="addProductForm" class="needs-validation" novalidate>
                                        <div class="row mb-3">
                                            <div class="col-md-6">
                                                <label for="addProductName" class="form-label">商品名称</label>
                                                <input type="text" class="form-control" id="addProductName"
                                                    name="proname" required>
                                                <div class="invalid-feedback">
                                                    请输入商品名称
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <label for="addProductPrice" class="form-label">价格</label>
                                                <div class="input-group">
                                                    <span class="input-group-text">¥</span>
                                                    <input type="number" class="form-control" id="addProductPrice"
                                                        name="price" step="0.01" min="0" required>
                                                    <div class="invalid-feedback">
                                                        请输入有效的价格
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row mb-3">
                                            <div class="col-md-6">
                                                <label for="addProductCategory" class="form-label">茶叶分类</label>
                                                <select class="form-select" id="addProductCategory" name="categoryid"
                                                    required>
                                                    <option value="">请选择分类</option>
                                                </select>
                                                <div class="invalid-feedback">
                                                    请选择茶叶分类
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <label for="addProductLevel" class="form-label">品质等级</label>
                                                <select class="form-select" id="addProductLevel" name="levelid"
                                                    required>
                                                    <option value="">请选择等级</option>
                                                </select>
                                                <div class="invalid-feedback">
                                                    请选择品质等级
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <label for="addProductStatus" class="form-label">上架状态</label>
                                                <select class="form-select" id="addProductStatus" name="status"
                                                    required>
                                                    <option value="1">上架</option>
                                                    <option value="0">下架</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="row mb-3">
                                            <div class="col-md-6">
                                                <label for="addProductOrigin" class="form-label">产地</label>
                                                <input type="text" class="form-control" id="addProductOrigin"
                                                    name="originplace" required>
                                                <div class="invalid-feedback">
                                                    请输入产地信息
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <label for="addProductQuantity" class="form-label">初始库存数量</label>
                                                <input type="number" class="form-control" id="addProductQuantity"
                                                    name="quantity" min="0" required>
                                                <div class="invalid-feedback">
                                                    请输入有效的库存数量
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row mb-3">
                                            <div class="col-md-6">
                                                <label for="addProductionYear" class="form-label">生产年份</label>
                                                <input type="number" class="form-control" id="addProductionYear"
                                                    name="productionyear" min="2000" max="2100" required>
                                                <div class="invalid-feedback">
                                                    请输入有效的生产年份
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <label for="addProductionMonth" class="form-label">生产月份</label>
                                                <input type="number" class="form-control" id="addProductionMonth"
                                                    name="productionmonth" min="1" max="12" required>
                                                <div class="invalid-feedback">
                                                    请输入有效的生产月份(1-12)
                                                </div>
                                            </div>
                                        </div>
                                        <div class="mb-3">
                                            <label for="addProductDescription" class="form-label">商品描述</label>
                                            <textarea class="form-control" id="addProductDescription" name="description"
                                                rows="3" placeholder="请输入商品描述信息..." required></textarea>
                                            <div class="invalid-feedback">
                                                请输入商品描述
                                            </div>
                                        </div>
                                        <div class="mb-3">
                                            <label for="addProductImage" class="form-label">商品图片</label>
                                            <input type="file" class="form-control" id="addProductImage" name="image"
                                                accept="image/*">
                                            <div class="form-text">支持jpg、png格式，建议尺寸800x800像素</div>
                                        </div>
                                    </form>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">
                                        <i class="bi bi-x-lg me-2"></i>取消
                                    </button>
                                    <button type="button" class="btn btn-success" onclick="submitAddProduct()">
                                        <i class="bi bi-check-lg me-2"></i>确认添加
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <script src="/app/pages/js/jquery.min.js"></script>
                    <script src="/app/pages/js/bootstrap.bundle.min.js"></script>
                    <script>
                        // 示例数据
                        const products = [
                            <c:forEach items="${list}" var="p" varStatus="status">
                                {
                                    "id": ${p.id},
                                "name": "${p.proname}",
                                "price": ${p.price},
                                "category": "${p.categoryname}",
                                "categoryId": ${p.categoryid},
                                "level": "${p.levelname}",
                                "levelId": ${p.levelid},
                                "origin": "${p.originplace}",
                                "stock": ${p.quantity},
                                "image": "${p.src}",
                                "productionDate": "${p.productionyear}-${p.productionmonth}",
                                "status": ${p.status},
                                "description": "${p.description}"
                                }${!status.last ? ',' : ''}
                            </c:forEach>
                        ];

                        let editModal;
                        let addModal;

                        // 格式化日期函数
                        function formatDate(dateString) {
                            const date = new Date(dateString);
                            const year = date.getFullYear();
                            const month = String(date.getMonth() + 1).padStart(2, '0');
                            return year + "年" + month + "月";
                        }

                        // 计算新鲜度标签
                        function getFreshnessLabel(dateString) {
                            const productionDate = new Date(dateString);
                            const now = new Date();
                            const diffDays = Math.floor((now - productionDate) / (1000 * 60 * 60 * 24));

                            if (diffDays <= 7) {
                                return '<span class="badge bg-success">新茶</span>';
                            } else if (diffDays <= 30) {
                                return '<span class="badge bg-info">本月新茶</span>';
                            }
                            return '';
                        }

                        // 页面加载完成后执行
                        $(document).ready(function () {
                            renderProducts(products);
                            // 获取分类和等级数据
                            $.ajax({
                                url: '/app/findproInfobyid',
                                type: 'GET',
                                dataType: 'json',
                                success: function (data) {
                                    // 填充分类下拉框
                                    $('#categoryFilter').html('<option value="">全部分类</option>');
                                    $('#editProductCategory').html('');
                                    $('#addProductCategory').html(''); // 添加商品模态框
                                    data.data.category.forEach((i) => {
                                        $('#categoryFilter').append('<option value="' + i.id + '">' + i.categoryname + '</option>');
                                        $('#editProductCategory').append('<option value="' + i.id + '">' + i.categoryname + '</option>');
                                        $('#addProductCategory').append('<option value="' + i.id + '">' + i.categoryname + '</option>');
                                    });

                                    // 填充等级下拉框
                                    $('#levelFilter').html('<option value="">全部等级</option>');
                                    $('#editProductLevel').html('');
                                    $('#addProductLevel').html(''); // 添加商品模态框
                                    data.data.level.forEach((i) => {
                                        $('#levelFilter').append('<option value="' + i.id + '">' + i.levelname + '</option>');
                                        $('#editProductLevel').append('<option value="' + i.id + '">' + i.levelname + '</option>');
                                        $('#addProductLevel').append('<option value="' + i.id + '">' + i.levelname + '</option>');
                                    });
                                },
                                error: function () {
                                    alert('获取分类和等级数据失败');
                                }
                            });

                            // 添加搜索框输入事件监听
                            $('#searchInput').on('input', function () {
                                searchProducts();
                            });

                            // 添加分类和等级筛选事件监听
                            $('#categoryFilter, #levelFilter').on('change', function () {
                                searchProducts();
                            });

                            // 初始化模态框
                            editModal = new bootstrap.Modal(document.getElementById('editProductModal'));
                            addModal = new bootstrap.Modal(document.getElementById('addProductModal'));

                            // 添加取消按钮点击事件
                            $('#cancelEditBtn').on('click', function () {
                                editModal.hide();
                            });

                            // 添加模态框隐藏后的事件处理
                            $('#editProductModal').on('hidden.bs.modal', function () {
                                document.getElementById('editProductForm').reset();
                            });

                            // 初始化添加商品模态框
                            addModal = new bootstrap.Modal(document.getElementById('addProductModal'));

                            // 添加取消按钮点击事件
                            $('#addProductModal .btn-close, #addProductModal .btn-light').on('click', function () {
                                $('#addProductForm')[0].reset();
                                $('#addProductForm').removeClass('was-validated');
                                addModal.hide();
                            });

                            // 添加模态框隐藏后的事件处理
                            $('#addProductModal').on('hidden.bs.modal', function () {
                                $('#addProductForm')[0].reset();
                                $('#addProductForm').removeClass('was-validated');
                            });

                            // 设置默认的生产年份为当前年份
                            $('#addProductionYear').val(new Date().getFullYear());

                            // 设置默认的生产月份为当前月份
                            $('#addProductionMonth').val(new Date().getMonth() + 1);

                            // 表单验证
                            const forms = document.querySelectorAll('.needs-validation');
                            Array.from(forms).forEach(form => {
                                form.addEventListener('submit', event => {
                                    if (!form.checkValidity()) {
                                        event.preventDefault();
                                        event.stopPropagation();
                                    }
                                    form.classList.add('was-validated');
                                }, false);
                            });
                        });

                        // 渲染商品列表
                        function renderProducts(products) {
                            const onSaleProducts = $('#onSaleProducts');
                            const offSaleProducts = $('#offSaleProducts');
                            onSaleProducts.empty();
                            offSaleProducts.empty();

                            if (products.length === 0) {
                                const noProductsHtml =
                                    '<div class="col-12 text-center py-5">' +
                                    '<i class="bi bi-search" style="font-size: 3rem; color: #ccc;"></i>' +
                                    '<h3 class="mt-3" style="color: #666;">未找到商品</h3>' +
                                    '</div>';
                                onSaleProducts.append(noProductsHtml);
                                return;
                            }

                            products.forEach(function (product) {
                                var stockStatus = product.stock <= 30 ?
                                    '<span class="badge bg-danger">库存紧张</span>' :
                                    (product.stock <= 50 ? '<span class="badge bg-warning">库存偏低</span>' : '');

                                var freshnessLabel = getFreshnessLabel(product.productionDate);

                                var statusBadge = product.status ?
                                    '<span class="badge bg-success">在售</span>' :
                                    '<span class="badge bg-secondary">未上架</span>';

                                var card =
                                    '<div class="col-md-4 col-lg-3 mb-4">' +
                                    '<div class="product-card">' +
                                    '<img src="' + product.image + '" class="product-img" alt="' + product.name + '">' +
                                    '<div class="product-info">' +
                                    '<div class="d-flex justify-content-between align-items-start">' +
                                    '<div class="product-title">' + product.name + '</div>' +
                                    '<div>' + statusBadge + ' ' + freshnessLabel + ' ' + stockStatus + '</div>' +
                                    '</div>' +
                                    '<div class="product-price">¥ ' + product.price.toFixed(2) + '</div>' +
                                    '<div class="mb-2">' +
                                    '<span class="badge badge-custom badge-category">' + product.category + '</span>' +
                                    '<span class="badge badge-custom badge-level">' + product.level + '</span>' +
                                    '</div>' +
                                    '<div class="product-meta">' +
                                    '<i class="bi bi-geo-alt"></i> 产地：' + product.origin +
                                    '</div>' +
                                    '<div class="product-meta">' +
                                    '<i class="bi bi-box-seam"></i> 库存：' + product.stock +
                                    '</div>' +
                                    '<div class="product-meta">' +
                                    '<i class="bi bi-calendar3"></i> 生产日期：' + formatDate(product.productionDate) +
                                    '</div>' +
                                    '<div class="action-buttons">' +
                                    '<button class="btn btn-outline-primary btn-custom" onclick="editProduct(' + product.id + ')">' +
                                    '<i class="bi bi-pencil"></i> 编辑' +
                                    '</button>' +
                                    '<button class="btn btn-outline-danger btn-custom" onclick="deleteProduct(' + product.id + ')">' +
                                    '<i class="bi bi-trash"></i> 删除' +
                                    '</button>' +
                                    '</div>' +
                                    '</div>' +
                                    '</div>' +
                                    '</div>';

                                // 根据商品状态添加到相应的容器
                                if (product.status) {
                                    onSaleProducts.append(card);
                                } else {
                                    offSaleProducts.append(card);
                                }
                            });

                            // 如果某个分类没有商品，显示提示信息
                            if (onSaleProducts.children().length === 0) {
                                onSaleProducts.append(
                                    '<div class="col-12 text-center py-3">' +
                                    '<p class="text-muted">暂无在售商品</p>' +
                                    '</div>'
                                );
                            }
                            if (offSaleProducts.children().length === 0) {
                                offSaleProducts.append(
                                    '<div class="col-12 text-center py-3">' +
                                    '<p class="text-muted">暂无未上架商品</p>' +
                                    '</div>'
                                );
                            }
                        }

                        // 搜索商品
                        function searchProducts() {
                            const searchText = $('#searchInput').val().toLowerCase();
                            const category = $('#categoryFilter').val();
                            const level = $('#levelFilter').val();
                            const filteredProducts = products.filter(product => {
                                const matchName = product.name.toLowerCase().includes(searchText);
                                const matchCategory = !category || product.categoryId == category; // 使用categoryId
                                const matchLevel = !level || product.levelId == level; // 使用levelId
                                return matchName && matchCategory && matchLevel;
                            });

                            renderProducts(filteredProducts);
                        }

                        // 添加商品
                        function addProduct() {
                            // 重置表单
                            $('#addProductForm')[0].reset();
                            $('#addProductForm').removeClass('was-validated');

                            // 显示模态框
                            addModal.show();
                        }

                        // 提交添加商品表单
                        function submitAddProduct() {
                            const form = document.getElementById('addProductForm');
                            if (!form.checkValidity()) {
                                form.classList.add('was-validated');
                                return;
                            }

                            const formData = new FormData(form);
                            // 处理图片上传
                            const imageFile = $('#addProductImage')[0].files[0];
                            if (imageFile) {
                                // formData.append('image', imageFile);
                                formData.append('suppid', '${param.id}');
                            }
                            // TODO: 实现添加商品的后端接口调用
                            console.log('添加商品表单数据：', Object.fromEntries(formData));
                            // alert('添加商品功能待实现');
                            $.ajax({
                                type: 'POST',
                                url: '/app/proadd',
                                data: formData,
                                dataType: 'json',
                                processData: false,
                                contentType: false,
                                success: function (data) {
                                    if (data.code == 200) {
                                        addModal.hide();
                                        location.reload();
                                    } else {
                                        alert(data.data);
                                    }
                                },
                            })
                        }

                        // 编辑商品
                        function editProduct(productId) {
                            const product = products.find(p => p.id === productId);
                            if (!product) {
                                alert('未找到商品信息');
                                return;
                            }

                            // 填充表单数据
                            $('#editProductId').val(product.id);
                            $('#editProductName').val(product.name);
                            $('#editProductPrice').val(product.price);
                            $('#editProductCategory').val(product.categoryId);  // 使用categoryId
                            $('#editProductLevel').val(product.levelId);       // 使用levelId
                            $('#editProductOrigin').val(product.origin);
                            $('#editProductStock').val(product.stock);
                            $('#editProductDescription').val(product.description);

                            // 解析生产日期
                            const [year, month] = product.productionDate.split('-');
                            $('#editProductionYear').val(parseInt(year));
                            $('#editProductionMonth').val(parseInt(month));

                            // 设置商品状态
                            $('select[name="status"]').val(product.status);

                            // 显示模态框
                            editModal.show();
                        }

                        // 保存商品更改
                        function saveProductChanges() {
                            // 表单验证
                            const form = document.getElementById('editProductForm');
                            if (!form.checkValidity()) {
                                form.reportValidity();
                                return;
                            }

                            const formData = new FormData(form);
                            const productData = Object.fromEntries(formData.entries());
                            console.log(productData)
                            // 发送AJAX请求到后端
                            $.ajax({
                                url: '/app/proedit',
                                method: 'POST',
                                data: productData,
                                dataType: 'json',
                                success: function (response) {
                                    if (response.code == 200) {
                                        // 关闭模态框
                                        editModal.hide();
                                        // 刷新商品列表
                                        location.reload();
                                    } else {
                                        alert('更新失败：' + response.data);
                                    }
                                },
                                error: function () {
                                    alert('服务器错误，请稍后重试');
                                }
                            });
                        }

                        // 删除商品
                        let deleteModal;
                        let productToDelete;

                        $(document).ready(function () {
                            // 初始化删除模态框
                            deleteModal = new bootstrap.Modal(document.getElementById('deleteConfirmModal'));

                            // 添加删除模态框的取消按钮点击事件
                            $('#deleteConfirmModal .btn-close, #deleteConfirmModal .btn-light').on('click', function () {
                                deleteModal.hide();
                            });

                            // 添加删除模态框隐藏后的事件处理
                            $('#deleteConfirmModal').on('hidden.bs.modal', function () {
                                productToDelete = null;
                            });

                            // 添加确认删除按钮点击事件
                            $('#confirmDeleteBtn').on('click', function () {
                                if (productToDelete) {
                                    // TODO: 实现删除商品功能
                                    $.ajax({
                                        url: '/app/prodelete?id=' + productToDelete,
                                        method: 'GET',
                                        data: {
                                            id: productToDelete
                                        },
                                        dataType: 'json',
                                        success: function (response) {
                                            if (response.code == 200) {
                                                // 刷新商品列表
                                                deleteModal.hide();
                                                location.reload();
                                            } else {
                                                alert('删除失败：' + response.data);
                                                deleteModal.hide();
                                            }
                                        },
                                        error: function () {
                                            alert('服务器错误，请稍后重试');
                                            deleteModal.hide();
                                        }
                                    })
                                }
                            });
                        });

                        function deleteProduct(productId) {
                            productToDelete = productId;
                            deleteModal.show();
                        }
                    </script>
                </body>

                </html>